{% extends 'ux_packages/package.html.twig' %}

{% block package_header %}
    {% component PackageHeader with {
        package: 'turbo',
        eyebrowText: 'Speed of an SPA'
    } %}
        {% block title_header %}
            Turbo your <em>website</em>
        {% endblock %}

        {% block sub_content %}
            The speed of a single-page web app without writing any JavaScript,
            courtesy of <a class="font-white text-underline" href="https://turbo.hotwired.dev/" rel="external noopener noreferrer">Turbo</a>

            <div style="position: absolute;  bottom: 4rem;  left: 50%;  transform: translateX(-50%);color: white;">
                {{ include('ux_packages/turbo/_chat_message_count.html.twig', {messageCount: this.messageCount}) }}
            </div>
        {% endblock %}

    {% endcomponent %}
{% endblock %}

{% block package_content %}
    <div class="container-fluid container-xxl px-4 pt-4 px-md-5">

        <section class="row mb-5">
            <div class="col-12 col-md-6 order-md-2">
                <div class="px-md-5">
                    <h2 class="ubuntu mt-3 mt-md-5" id="drive">Turbo <span class="font-purple">Drive</span></h2>
                    <p class="mt-2">Transform all link clicks and form submits into Ajax
                    calls to get that single-page-application feel.</p>
                    <div class="alert alert-secondary d-flex justify-content-start col-12 mt-5">
                        <img width="18px" height="18px" src="{{ asset('images/info-icon.png') }}" alt="Icon to indication information">
                        <p class="info-tooltips ms-2 mb-0">
                            <twig:ux:icon name="arrow-left"/>
                            Click any links on this site or submit this form.
                        Zero full page refreshes!</p>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-6 order-md-1">
                {% embed 'ux_packages/_package_demo.html.twig' %}
                    {% block title %}
                        Turbo Drive Demo
                    {% endblock %}
                    {% block content %}
                        {% if name and animal %}
                            <div>Say hello to {{ name }} the brave & noble {{ animal }}!</div>
                            <a href="{{ path('app_turbo') }}"><twig:ux:icon name="arrow-left" /> Back</a>
                        {% else %}
                            <div class="mb-3">Build yourself a new pet</div>
                            <form method="POST" novalidate>
                                <div class="d-flex justify-content-between">
                                    <div class="flex-grow-1">
                                        {{ form_row(form.name, {
                                            row_attr: {class: 'form-floating'},
                                            attr: {placeholder: 'Enter a name'},
                                        }) }}
                                    </div>
                                    <div class="flex-grow-1 ms-2">
                                        {{ form_row(form.animal, {
                                            row_attr: {class: 'form-floating'},
                                        }) }}
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-dark mt-5" style="width: 100%;">Create!</button>
                            </form>
                        {% endif %}
                    {% endblock %}
                {% endembed %}
            </div>
        </section>

        <section class="row mb-5 pt-md-5">
            <div class="col-12 col-md-6">
                <div class="px-md-5">
                    <h2 class="ubuntu mt-5" id="frames">Turbo <span class="font-purple">Frames</span></h2>
                    <div>Decompose complex pages into different parts that load and behave independently. Try it - it's smooth.</div>
                    <div class="alert alert-secondary d-flex col-12 justify-content-start mt-5">
                        <img width="18px" height="18px" src="{{ asset('images/info-icon.png') }}" alt="Icon to indication information">
                        <p class="info-tooltips ms-2 mb-0">
                        The frame displays just part of the full page from
                        <a href="{{ path('app_turbo_todo_list') }}">{{ url('app_turbo_todo_list') }}</a>.
                        All link clicks and form submits stay *inside* the frame.
                        <twig:ux:icon name="arrow-right" /></p>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-6">
                {% embed 'ux_packages/_package_demo.html.twig' %}
                    {% block title %}
                        Turbo Frames Demo
                    {% endblock %}
                    {% block content %}
                        <turbo-frame
                            id="daily-todos"
                            src="{{ path('app_turbo_todo_list') }}"
                        ></turbo-frame>
                    {% endblock %}
                {% endembed %}
            </div>
        </section>

        <section {{ turbo_stream_listen('chat') }} class="row mb-5 pt-md-5">
            <div class="col-12 col-md-6 order-md-2">
                <div class="px-md-5">
                    <h2 class="ubuntu mt-5" id="turbo-streams">Turbo <span class="font-purple">Streams</span></h2>
                    <div>
                        Deliver page updates - to *any* elements on your page -
                        directly from Symfony. Add Mercure to do this for *any*
                        users on your site, in real-time.
                    </div>
                    <div class="alert alert-secondary d-flex justify-content-start col-12 mt-5">
                        <img width="18px" height="18px" src="{{ asset('images/info-icon.png') }}" alt="Icon to indication information">
                        <p class="info-tooltips ms-2 mb-0"><twig:ux:icon name="arrow-left" />
                        Chat with someone else viewing this page (or open a
                        2nd browser tab to talk to yourself)! Submitting also
                        updates the <a href="#message-count-header"><twig:ux:icon name="comment" /> icon</a> in the header.</p>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-6 demo-chat">
                {% embed 'ux_packages/_package_demo.html.twig' %}
                    {% block title %}
                        Turbo Streams Demo <small>(your username is <code> {{ myUsername }}</code>)</small>
                    {% endblock %}
                    {% block content %}
                        <div style="height: 150px; overflow: auto;">
                            <ul class="list-unstyled" id="chat-box">
                                {{ include('ux_packages/turbo/_chat_list.html.twig') }}
                            </ul>
                        </div>
                    {% endblock %}
                    {% block content_secondary %}
                    <div class="DemoContainer-inner p-4">
                        <form id="chat-form" action="{{ path('app_turbo_chat') }}" method="POST">
                            {{ include('ux_packages/turbo/_chat_form.html.twig') }}
                        </form>
                    </div>
                    {% endblock %}
                {% endembed %}
            </div>
        </section>

    </div>
{% endblock %}
